<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="pandyle.css">
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="pandyle.js"></script>
</head>

<body>
    <div class='flex' data-gap="10" style="height: 200px; border: 1px solid silver; padding: 10px">
        <div class="w-1" style="height: 100px; background-color: silver;"></div>
        <div class="w-1" style="height: 50px; background-color: silver;"></div>
        <div class="w-1" style="height: 100px; background-color: silver;"></div>
    </div>
    <div class="flex">
        <button class="tab-hover" data-target="tab1">tab1</button>
        <button class="tab-hover" data-target="tab2">tab2</button>
    </div>
    <div>
        <div id="tab1">这是tab1</div>
        <div id="tab2" class="hidden">这是tab2</div>
    </div>
    <div class="carousel hasIndicator" data-id="c1" data-timing="300" style="border: 1px solid silver; height: 300px">
        <img src="avatar.jpg" alt="">
        <img src="avatar.jpg" alt="">
    </div>
    <p class="clamp-2">这是一段很长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长的话</p>
    <div>
        <button data-pop="pop1">显示pop1</button>
        <button data-pop="pop2">显示pop2</button>
    </div>
    <div class="pop hidden" id="pop1">这是pop1</div>
    <div class="pop hidden" id="pop2">这是pop2</div>
    <button data-pop="full">显示全屏弹框</button>
    <div id="full" class="full hidden">
        <button onclick="hide('#full')">关闭</button>
    </div>

    <script>
        $('.carousel').carousel().afterSlide(function() {
            alert('Hello');
        })
    </script>

    <t src="template.html"></t>

</body>

</html>